<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Local login</title>
    <!--本地调试的参数配置文件-->
    <script src="config.js"></script>
    <!--全局变量注入-->
    <script src="js/base.js"></script>
    <script>
      loadCSS([
        "/agcloud/framework/js-lib/agcloud-lib/css/reset.css",
        "/agcloud/framework/ui-private/default/common/css/metronic.css",
        "/agcloud/framework/js-lib/element-2/element.css",
        "/agcloud/framework/ui-private/default/common/css/layout.css",
      ]);
      loadCSS(["/agcloud/framework/ui-private/default/green/css/theme.css"], ["themeVer"]);
    </script>
    <style>
      [v-cloak] {
        display: none;
      }
      .el-dialog {
        width: 25%;
      }
      .el-dialog__body {
        padding: 10px 20px 30px;
      }
      .lg-btn {
        width: 100%;
        margin-top: 12px;
        height: 35px;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <!--本地调试用的登录弹窗-->
      <el-dialog title="仅用于调试登录" :visible="true" :show-close="false">
        <el-form @keyup.enter.native="login">
          <el-form-item prop="username" label="账号">
            <el-input v-model="debugUserName" placeholder="请输入账号" :autofocus="true"> </el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input v-model="debugPassword" type="password" placeholder="请输入密码"> </el-input>
          </el-form-item>
          <el-button type="primary" class="lg-btn" @click="login">登录</el-button>
        </el-form>
      </el-dialog>
    </div>
    <script>
      loadJS([
        "/agcloud/framework/js-lib/jquery-v1/jquery.min.js",
        "/agcloud/framework/js-lib/vue-v2/vue.js",
        "/agcloud/framework/js-lib/element-2/element.js",
        "/agcloud/framework/js-lib/axios-v0.21.0/axios.min.js",
        "/agcloud/framework/js-lib/agcloud-lib/common/vueEleInit.js",
        "/agcloud/framework/login/js/base64.js",
        "/agcloud/framework/login/js/sm3/sm3.js",
        "/agcloud/framework/login/js/sm4.js",
        "/agcloud/framework/login/js/md5.js",
        "../../js/request.js",
        "../../js/axios.js",
      ]);
    </script>
    <script>
      function vueElePageInit() {
        if (window.vm) return;
        var sm4 = new SM4Util();
        window.vm = new Vue({
          el: "#app",
          data: {
            debugUserName: "",
            debugPassword: "",
            loginConfig: "",
            reBackUrl: "",
            hrefObj: {},
          },
          methods: {
            login: function () {
              let _this = this,
                name = _this.debugUserName,
                password = _this.debugPassword;
              if (name.length === 0 || password.length === 0) {
                _this.$message.info("请输入");
                return;
              }

              let paramData = {
                isApp: true,
                autoLogin: true,
                deviceType: sm4.encryptData_ECB(_this.loginConfig.deviceType),
                username: sm4.encryptData_ECB(name),
                password: sm3(password),
                proPassword: sm3(sm4.encryptData_ECB(password)),
              };
              debugger
              $.ajax({
                url: window[envName].nacos.opusFrontSso + "/authentication/form",
                data: paramData,
                type: "post",
                headers: {
                  Authorization: "Basic " + _this.loginConfig.clientAuth,
                  "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
                  isAgAjax: true,
                },
                xhrFields: {
                  withCredentials: true,
                },
                crossDomain: true,
                success: function (data) {
                  if (data.success) {
                    localStorage.setItem("access_token", data.content.access_token);
                    // 添加 token 有效时间;
                    localStorage.setItem("token_expire_time", new Date().getTime() + 1000 * 60 * 60 * 6);
                    window.location.href = _this.reBackurl;
                  } else {
                    _this.$message({
                      message: data.content.message,
                      type: "error",
                    });
                  }
                },
                error: function (error) {
                  _this.$message({
                    message: error.message ? error.message : "登录失败，请重新登陆",
                    type: "error",
                  });
                },
              });
            },
            parseURL: function (inUrl) {
              let _this = this;
              var url = inUrl.split("?")[1];
              if (!url) {
                console.warn("No source page's url.");
                return _this;
              }
              var para = url.split("&");
              var len = para.length;
              var res = {};
              var arr = [];

              for (var i = 0; i < len; i++) {
                arr = para[i].split("=");
                let arr2 = para[i].split(arr[0]);
                res[arr[0]] = arr2[1].substr(1);
              }
              this.hrefObj = res;
              return _this;
            },
            setParams: function () {
              var reBackUrlFlag =
                this.hrefObj.reBackurl === "undefined" ||
                this.hrefObj.reBackurl === undefined ||
                this.hrefObj.reBackurl === "null" ||
                this.hrefObj.reBackurl == null;
              this.reBackurl = !reBackUrlFlag ? new Base64().decode(this.hrefObj.reBackurl) : "";
            },
            // 获取方案数据
            fetchLoginConfigFn: function () {
              var _this = this;
              request(
                "sso",
                {
                  url: window[envName].nacos.opusAdminUi + "/loginConfig",
                  type: "get",
                },
                function (data) {
                  if (data.success) {
                    _this.loginConfig = data.content || [];
                  } else {
                    _this.$message.error(data.message ? data.message : "获取失败");
                  }
                },
                function (msg) {
                  _this.$message.error(msg.message ? msg.message : "服务器错了哦!");
                }
              );
            },
          },
          beforeMount: function () {
            this.parseURL(window.location.search).setParams();
          },
          mounted: function () {
            var _this = this;
            _this.fetchLoginConfigFn();
          },
        });
      }
    </script>
  </body>
</html>
